<template>
  <div v-title="'系统权限 - 世外票务云平台'">
    <mk-breadcrumb :is-return="true" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class='content-box MkAddPermission'>
      <el-form :model="roleDetail" :rules="rules" ref="roleDetail" label-width="85px"
               class='contentDiv'>
        <el-form-item label="权限名称" prop='name'>
          <el-input v-model="roleDetail.name"  placeholder='请输入权限名称' size=""
                    style='width:400px;'></el-input>
        </el-form-item>
        <el-form-item label="权限说明" prop='description'>
          <el-input v-model="roleDetail.description" type='textarea'  placeholder='请输入权限说明' :rows='3'
                    style='width:400px;'></el-input>
        </el-form-item>
        <el-form-item label="权限选择" prop=''>

          <template v-if="roleDetail.roleResourcePermss.length > 0 && permissionList.length>0">

            <el-table :data="roleDetail.roleResourcePermss" border :row-class-name='rowEvent' style="width: 700px;">
              <el-table-tree-column class-name='treeColumn' parent-key="parentId" child-num-key="childAmount" prop="name"
                                    label="功能名称">
              </el-table-tree-column>

              <el-table-column v-for="(permission,index) in permissionList" :label="permission.name" width="60" :key="permission.id" class-name='textAlign'>
                <template slot-scope='scope'>

                  <template v-if='scope.row.childAmount==0'>
                    <div class='borderTop borderLeft' @click='changeRight($event)'>

                      <template v-if='scope.row.permissions.length>0'>
                        <i class='el-icon-check isChecked'  :resourceId='scope.row.id' ref='permissionIcon' :permissionId='permission.id' v-if="isChecked(scope.row.permissions,permission.id)" ></i>
                        <i class='el-icon-close notChecked' :resourceId='scope.row.id' ref='permissionIcon':permissionId='permission.id' v-if='!isChecked(scope.row.permissions,permission.id)' ></i>
                      </template>
                      <template v-else>
                        <i class='el-icon-close notChecked' :resourceId='scope.row.id' ref='permissionIcon' :permissionId='permission.id'></i>
                      </template>
                    </div>
                  </template>
                  <template v-else>
                    <div class='borderTop' :class='{borderLeft:index==0}'></div>
                  </template>
                </template>
              </el-table-column>
            </el-table>

          </template>
          <el-form-item label='' style='margin-top:30px;'>
            <el-button type="primary" class="btn-primary" :disabled="isSubmitBtnDisabled" @click='submitRole' v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
            <el-button type='primary' :disabled="isSubmitBtnDisabled" class='btn-cancel' @click="cancelSubmit" size=''>取消</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
    import { mapState } from 'vuex'
  import permissionService from '../../../services/setting'
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import ElTableTreeColumn from '../../../../packages/table-tree-column'

  export default {
    name: 'MkAddPermission',
    components: {
      ElTableTreeColumn,MkBreadcrumb,
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
    }),
    methods: {
      rowEvent(row, index){
          console.log(row)
        if (row.row.depth == 0) {
          return 'hasBorderTop';
        }else{
          return 'hasNoBorderTop'
        }
      },
//      组装数据
      pagekagePermission(permissionIcon){
        var resourceId = '';
        var obj = new Object();
        var array = new Array();
        var parentArray = new Array();
        permissionIcon.forEach(node => {
          if (node.className == "el-icon-check isChecked"){
            if (resourceId == node.attributes['resourceId'].nodeValue){
              array.push(node.attributes['permissionId'].nodeValue);
            }else {
              obj = new Object();
              obj.resourceId = node.attributes['resourceId'].nodeValue;
              array = new Array();
              array.push(node.attributes['permissionId'].nodeValue);
              obj.perms = array;
              parentArray.push(obj);
            }
            resourceId = node.attributes['resourceId'].nodeValue;
          }
        });
        return JSON.stringify(parentArray);
      },
//      角色添加或更新
      submitRole() {
        var that=this;
        this.$refs['roleDetail'].validate((valid) => {

          if (valid){
            this.fullscreenLoading=true;
            this.isSubmitBtnDisabled = true;
//            console.log(this.pagekagePermission(this.$refs.permissionIcon));
            if(this.roleDetail.id != null && this.roleDetail.id !=''){
              permissionService.httpModifyRole({
                roleId : this.roleDetail.id,
                name : this.roleDetail.name,
                description : this.roleDetail.description,
                permissions : this.pagekagePermission(this.$refs.permissionIcon)
              }, result => {
                this.$message({
                  type: 'success',
                  message: '编辑成功',
                  onClose: function() {
                    that.fullscreenLoading=false;
//                    that.$router.push({name: 'systemPermission'});
                    that.$router.push({path: '/systemPermission'});
                  }
                });
              },result=>{
                this.fullscreenLoading = false;
                this.isSubmitBtnDisabled = false;
              });
            }
            else {
              permissionService.httpAddRole({
                name : this.roleDetail.name,
                description : this.roleDetail.description,
                permissions : this.pagekagePermission(this.$refs.permissionIcon)
              }, result => {
                this.$message({
                  type: 'success',
                  message: '添加成功',
                  onClose: function() {
                    that.fullscreenLoading = false;
//                    that.$router.push({name: 'systemPermission'});
                    that.$router.push({path: '/systemPermission'});
                  }
                });
              },result=>{
                this.fullscreenLoading = false;
                this.isSubmitBtnDisabled = false;
              });
            }
          }
        });
      },
      cancelSubmit(){
        this.$router.push({path: '/systemPermission'});
      },
      changeRight(event) {
        if(event.target.children != null && event.target.children.length > 0){
          if(event.target.children[0].className=='el-icon-close notChecked') {
            event.target.children[0].className='el-icon-check isChecked';
          }else{
            event.target.children[0].className='el-icon-close notChecked';
          }
        }else {
          if(event.target.className=='el-icon-close notChecked') {
            event.target.className = 'el-icon-check isChecked';
          }else{
            event.target.className = 'el-icon-close notChecked';
          }
        }
      },
      isChecked(permissions, permission) {
        if(permissions.indexOf(permission)>-1){
          return true;
        }else{
          return false;
        }
      }
    },
    mounted: function() {
//      console.log(this.$route.params.id)
      if(this.$route.params.id!=='0'){
        this.breadcrumbData.list.third.name='编辑权限';
        permissionService.httpRoleDetail({roleId : this.$route.params.id}, roleDetail => {
          this.roleDetail.id = this.$route.params.id;
          this.roleDetail.name = roleDetail.name;
          this.roleDetail.description = roleDetail.description;
          this.roleDetail.roleResourcePermss = roleDetail.roleResourcePermss;
//          console.log(this.roleDetail.roleResourcePermss)
        });
      }else{
        this.breadcrumbData.list.third.name='新增权限';
        permissionService.httpRoleDetail({roleId : ''}, roleDetail => {
          this.roleDetail.roleResourcePermss = roleDetail.roleResourcePermss;
        });
      }
      permissionService.httpPermissionList(permissionList => {
        this.permissionList = permissionList;
      });
    },
    data () {
      return {
        isSubmitBtnDisabled: false,
        fullscreenLoading: false,
        breadcrumbData: {
          list: {
            first: {name: '系统设置', path: null, isClickAble: false},
            second: {name: '系统权限', path: '/systemPermission',isClickAble: true},
            third: {name: '编辑权限', path: null, isClickAble: false}
          },
          menuIconStyle : 'staffIconStyle'
        },
        roleDetail :  {
          id : "",
          name : "",
          description : "",
          roleResourcePermss : []
        },
        rules : {
          name: [
            { required: true, message:"请填写名称", trigger: 'blur' },
          ],
          description: [
            { required: false, message:"请填写权限说明", trigger: 'blur' },
          ],
        },
        permissionList : [],    //现有权限列表
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../../assets/style/main.less';
  .MkAddPermission {
    .contentDiv {
      background-color: #fff;
      padding: 30px;
      padding-bottom:10px;
      margin-bottom: 10px;
    }
    tbody tr:first-child .borderTop{
      border-top:none!important;
    }
    .el-table td,.el-table th{
      padding:0
    }
    .el-table td{
      border:none;
    }
    .el-table .cell{
      padding:0;
    }
    .el-table--border td:first-child .cell{
      /*padding:0;*/
    }
    .el-table::after {
      width: 0;
    }
    .el-table::before{
      height:0;
    }
    .el-table--border td {
      border-right: none;
    }
    .el-table--border th {
      font-weight:normal;
      border-right: none;
      border-left: 1px solid rgb(223, 236, 236);
    }
    .el-table--border .el-table_1_column_1 {
      border-left: none;
    }
    .el-table {
      border: 1px solid @borderColor;
      .cell {
        padding: 0;
      }
      .el-table__header {
        th {
          text-align: center;
          background-color: @borderColor;
          .cell {
            height: 50px;
            line-height: 50px;
          }
        }
      }
      .el-table__header-wrapper thead div {
        background: none;
      }
      .el-table__body {
        tr {
          td {
            text-align: center;
            .cell {
              height: 40px;
              line-height: 40px;
              .borderTop {
                height: 100%;
                width: 100%;
                box-sizing: border-box;
                -moz-box-sizing: border-box; /* Firefox */
                -webkit-box-sizing: border-box; /* Safari */
                border-top: 1px solid @borderColor;
              }
              .borderLeft {
                border-left: 1px solid @borderColor;
              }
            }
          }
          .treeColumn {
            text-align: left;
            padding-left: 20px;
          }
        }
        .hasBorderTop{
          .treeColumn {
            border-top: 1px solid @borderColor;
          }
        }
        .hasBorderTop:first-child{
          .treeColumn {
            border-top:none;
          }
        }
        .hasNoBorderTop {
          .textAlign{
            cursor: pointer;
          }
        }
        /*        .firstRow {
                  td {
                    .cell {
                      .borderTop {
                        border-top: none;
                      }
                    }
                  }
                }*/
      }
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #fff;
    }
    .isChecked {
      color: @primaryColor;
    }
    .notChecked {
      color: #c6cdd2;
    }

  }
</style>
